<template>
  <div class="gongdan">
    <div class="gongdan-bar">
      <select-bar title="工单" v-if="clear">
        <select-bar-item
          v-for="(item,idx) in gongdanItems"
          :idx="idx"
          :key="item.name"
          :title="item.name + ' (' + item.num + ')'"
          :clickStyle="item.style"
          :path="'/main/gongdan/all?type=' + item.type"
          @clearStyle="clearStyle(gongdanItems,$event)"
        ></select-bar-item>
      </select-bar>
    </div>
    <div style="width: 250px; height: 100%"></div>
    <div class="gongdan-main">
      <router-view :key="$route.path + $route.query.type"></router-view>
    </div>
  </div>
</template>

<script>
import SelectBar from "@/components/SelectBar/SelectBar";
import SelectBarItem from "@/components/SelectBar/SelectBarItem";
export default {
  components: {
    SelectBar,
    SelectBarItem,
  },
  created() {
    this.$axios.get("/workOrder").then((res) => {
      this.workOrderList = res.data.workOrderList;
    });
  },
  mounted () {
    this.$store.commit('setTitle','工单')
    this.$store.commit('NavStyleClear','工单')
  },
  data() {
    return {
      clear: true,
      gongdanItems: [
        {
          name: "全部工单",
          num: 1000,
          type: "all",
          style: true,
        },
        {
          name: "待我处理的",
          num: 100,
          type: "dealing",
          style: false,
        },
        {
          name: "我创建的",
          num: 0,
          type: "create",
          style: false,
        },
        {
          name: "抄送我的",
          num: 0,
          type: "send",
          style: false,
        },
        {
          name: "我处理的",
          num: 0,
          type: "dealed",
          style: false,
        },
        {
          name: "我解决的",
          num: 0,
          type: "accept",
          style: false,
        },
      ],
      workOrderList: [],
      mytitle: [
        {
          name: "工单ID",
          prop: "id",
          width: 98,
        },
        {
          name: "工单标题",
          prop: "title",
          width: 141,
        },
        {
          name: "工单渠道",
          prop: "channel",
          width: 141,
        },
        {
          name: "工单状态",
          prop: "status",
          width: 141,
        },
        {
          name: "客户姓名",
          prop: "customerName",
          width: 141,
        },
        {
          name: "最后更新时间",
          prop: "lastUpdateTime",
          width: 200,
        },
      ],
    };
  },
  methods: {
    clearStyle(items,ev) {
      this.clear = false;
      for (let i in items) {
        items[i].style = false
      }
      items[ev].style = true
      this.$nextTick(() => {
        this.clear = true;
      })
      console.log("gdan");
      console.log(ev);
    },
  },
};
</script>

<style>
.gongdan {
  width: 100%;
  height: 108%;
  /* background-color: #999999; */
  display: flex;
}

.gongdan-bar {
  width: 200px;
  height: 100%;
  position: fixed;
}

.gongdan-main {
  width: 100%;
  height: 105%;
  margin-left: 35px;
  /* background-color: aqua; */
}
</style>